<template>
	<button 
		class="app-button" 
		:class="[type, { 'disabled': disabled }]" 
		:disabled="disabled"
		@tap="handleTap"
	>
		<text class="button-text">{{ text }}</text>
	</button>
</template>

<script>
export default {
	name: 'AppButton',
	props: {
		text: {
			type: String,
			required: true
		},
		type: {
			type: String,
			default: 'primary',
			validator: function (value) {
				return ['primary', 'secondary'].indexOf(value) !== -1
			}
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleTap() {
			if (!this.disabled) {
				this.$emit('tap');
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.app-button {
	padding: 24rpx 48rpx;
	border-radius: 60rpx;
	border: none;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, opacity 0.2s ease;
	
	&:active {
		transform: scale(0.98);
	}
	
	&.disabled {
		opacity: 0.5;
	}
	
	&.primary {
		background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
		
		.button-text {
			color: white;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
	
	&.secondary {
		background-color: rgba(255, 255, 255, 0.9);
		border: 2rpx solid #6A82FB;
		
		.button-text {
			color: #000000;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
}

.button-text {
	line-height: 1;
}
</style>